<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>app-home</title>
  </head>
  <body>
    <div class="app-home">
      <div class="swiper advert">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="../fitness-imgs/huo-imgpic.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="../fitness-imgs/huo-imgpic2.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="../fitness-imgs/huo-imgpic3.jpg" alt="" />
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <!-- <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div> -->
      </div>

      <div class="banner">
        <ul class="banner-list">
          <li class="list-first">
            <p class="fleft">
              <span class="fs20 clbl fwb">今日排名</span>
              <span class="iconfont icon-rank"></span>
              <span id="rank" class="fl-rank">9</span>
            </p>
            <p class="fright">
              <span class="fs20 clbl fwb"
                >累计打卡<span id="punchDay">23</span>天</span
              >
              <span class="iconfont icon-checkdate"></span>
              <a id="punchToday">今日打卡</a>
            </p>
          </li>
          <li class="list-first second">
            <p class="fleft">
              <span class="fs20 clbl fwb">观看历史</span>
            </p>
            <div class="fright">
              <span class="fs20 clbl fwb">累积观影徽章</span>
              <p class="frtips f18">
                <span id="badgeNum" class="fs80">3</span>枚
              </p>
            </div>
          </li>
          <li class="list-third" id="listThird">
            <p class="third-mask">观看精彩短片</p>
          </li>
          <li class="list-fourth" id="listFourth">
            <p class="fourth-mask">做任务获积分</p>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>
